<script setup lang="ts">
// 为组件的 emits 标注类型的目的：
// 1. 让编辑器可以智能提示
// 2. 让TS可以进行类型校验
// 3. 让组件的开发者减少错误代码的产生

// 基于Vue3自带的类型约束
// const emit = defineEmits({
//   myEvent: (data: string) => true,
// });
// function handleClick() {
//   // emit("myEvent", 123); // 这里会报错，因为传递的参数类型不对
//   emit("myEvent", "123");
// }

// 基于TS 的类型约束

// const emit = defineEmits<{
//   (e: "myEvent", data: string): void;
// }>();

const emit = defineEmits<{
  myEvent: [data: string];
}>();

function handleClick() {
  emit("myEvent", "123");
}
</script>

<template>
  <h3>02-为组件的 emits 标注类型</h3>
  <button @click="handleClick">发送数据</button>
</template>

<style scoped></style>
